<template>
  <div class="nowshow">
    <div ref="moviesScroll" class="list">
      <div class="wrap">
        <Item v-for="item in movies.movieList" :key="item.id" :movie="item"></Item>
      </div>
    </div>
  </div>
</template>


<script>
import Item from "../hostshow/Item";
import { get, post } from "../../../api/http";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import { mapMutations } from "vuex";
BScroll.use(Pullup);
export default {
  components: {
    Item,
  },
  data() {
    return {
      movies: {
        pagesize: 10,
        start: 12,
        hasMore: true,
        movieIds: [],
        movieList: [],
      },
    };
  },
  created() {
    this.getMovielist();
  },
  methods: {
    //请求第一页的数据
    async getMovielist() {
      let rs = await get("/ajax/movieOnInfoList", {});
      this.movies.movieIds = rs.data.movieIds;
      this.movies.movieList.push(...rs.data.movieList);
      // console.log(rs);
      this.$nextTick(() => {
        this.setMoviesScroll();
      });
    },
    setMoviesScroll() {
      // 判断
      if (this.moviesScroll) {
        // 拖动滚动条完成
        this.moviesScroll.finishPullUp();
        //重新计算滚动条
        this.moviesScroll.refresh();
        return;
      }
      this.moviesScroll = new BScroll(this.$refs.moviesScroll, {
        scrollY: true,
        pullUpLoad: true,
      });
      // 翻页
      this.moviesScroll.on("pullingUp", () => {
        console.log("up...");
        // 第一页之外的其它页面的数据
          if (this.movies.hasMore) {
            this.getMoreMovieList();
          }
      });
    },
    //请求除了第一页之外的其它页面的数据
    async getMoreMovieList() {
      let rs = await get("/ajax/moreComingList", {
        token: "",
        movieIds: this.movies.movieIds
          .slice(this.movies.start, this.movies.start + this.movies.pagesize)
          .join(","),
      });
      // 更新其实索引在
      this.movies.start+=this.movies.pagesize

      // 判断没有更多的数据
      if (rs.data.coming.length < this.movies.pagesize) {
        this.movies.hasMore = false;
      }

      this.movies.movieList.push(...rs.data.coming);
      // console.log(rs);
      this.$nextTick(() => {
        this.setMoviesScroll();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nowshow {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .list {
    flex: 1;
    overflow: hidden;
  }
}
</style>
